<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>市级单位北京市优秀退役军人</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style type="text/css" media="screen">
        *{box-sizing: border-box;}
        body{
            font-family: "Noto";
            min-height: 100vh;
        }
        header {
            padding-top: 1.4rem;
            height: 6.24rem;
            background-image: url('./images/bjt2_.png');
            background-size: cover;
        }
        .logo {
            width: 80%;
            margin: 0 auto;
        }
        .logo img{
            height: 0.72rem;
            display: block;
            margin: 0 auto;
        }
        header .name{
            width: 80%;
            margin: 0 auto;
            font-weight: bold;
            color: #ffffff;
            text-align: center;
            font-size: 0.72rem;
            margin-top: 0.5rem;
            line-height: 0.43rem;
            height: 1.44rem;
            position: relative;
        }
        header .name i{
            font-style: normal;
        }
        header .name span{
            line-height: initial;
            padding: 0.05rem 0.2rem;
            margin: 0 auto;
            display: inline-block;
            margin-top: 0.165rem;
            font-size: 0.28rem;
            background-color: #ff7f00;
        }
        .head-grod{
            color: #ffffff;
            font-family: "Noto";
            font-weight: 700;
            text-align: center;
            font-size: 0.24rem;
            margin-top: 1.46rem;
            line-height: 0.42rem;
        }

        .main{
            margin-top: -0.4rem;
            /* padding-top: 0.5rem; */
            padding-bottom: 0.43rem;
            background-color: #c32000;
            background: -webkit-linear-gradient(top,#c32000 60%,#fa8313) no-repeat;

        }
        .main .container{
            width: 6.86rem;
            min-height: 100vh;
            margin: 0 auto;
            padding: 0.2rem 0;
            background-color: #e5302a;
            box-shadow: 0px 11px 50px 0px 
                rgba(49, 20, 18, 0.1);
            border-radius: 10px;
        }
        .main .main-inner{
            width: 6.43rem;
            height: 16rem;
            padding: 0.18rem;
            margin: 0 auto;
            background-color: #fbfbf3;
            box-shadow: 0px 4px 34px 0px 
                rgba(49, 20, 18, 0.15);
            border-radius: 4px;
        }
        .main-container{
            border: solid 0.01rem #e6a7a1;
            padding: 0 0.3rem;
            position: relative;
        }
        .main-container::after,
        .main-container::before{
            content: "";
            display: block;
            width: 0.2rem;
            height: 0.2rem;
            position: absolute;
            background-color: #ffffff;
            border: solid 0.01rem #e6a7a1;
        }
        .main-container::after{
            bottom: -0.01rem;
            left: -0.01rem;
            border-left: 0;
            border-bottom: 0;
        }
        .main-container::before{
            bottom: -0.01rem;
            right: -0.01rem;
            border-right: 0;
            border-bottom: 0;
        }
        .cont-box{
            position: relative;
        }
        .main .main-inner .title{
            width: 7.22rem;
            position: absolute;
            left: 50%;
            top: -0.6rem;
            transform: translateX(-50%);
        }
        .main .main-inner .top-auto{
            top: auto;
        }
        .main .main-inner .title>img{
            width: 100%;
            display: block;
        }
        .main .main-inner .box-txt{
            font-size: 0.3rem;
            padding-top: 0.9rem;
            margin-bottom: 0.3rem;
            color: #490004;
            /*font-family: "Noto Sans CJK";*/
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
            font-weight: normal;
            text-shadow: 0px 0px #000;
            line-height: 0.5rem;
        }
        .main .main-inner .pt-150{
            padding-top: 1.5rem;
        }
        
    </style>
</head>
<body>
    <div class="wrap">
        <header>
            <div class="logo">
                <img src="./images/head-ig1.png" alt="">
            </div>
            <h1 class="name"><i>邸乃庸全国规范退役军人全国规范退役军人</i>
                <!-- <br><span>全国规范退役军人</span> -->
            </h1>
        </header>
        <div class="main">
            <div class="container">
                <div class="main-inner">
                    <div class="main-container">
                        <div class="cont-box">
                            <div class="title">
                                <img src="./images/cont-title-bg-jb.png" alt="">
                            </div>
                            <p class="box-txt">男，1940年8月出生，汉族，籍贯河北省涞县，中共党员，1993年11月入伍，2004年6月退休。退役前为总装备部921工程办公室工程总体室高级工程师，正师职，现为北京市军队离休退休干部阳光休养所军队离退休干部。</p>
                        </div>
                        <div class="cont-box">
                            <div class="title top-auto">
                                <img src="./images/cont-title-bg-ch.png" alt="">
                            </div>
                            <p class="box-txt pt-150">荣立三等功一次，2004年荣获国家科学技术进步奖，1991年荣获“八六三计划”先进工作者，获国家科技进步三等奖，“长征二号卫星运载器总体设计”获全国科学大会奖，均为主要完成人， 1996年获科工委软科学科技进步二等奖，署名第四等，获得多种奖项，享受1997年度政府特殊津贴。</p>
                        </div>
                        <div class="cont-box">
                            <div class="title top-auto">
                                <img src="./images/cont-title-bg-jy.png" alt="">
                            </div>
                            <p class="box-txt pt-150">邸乃庸，原总装备部921工程办公室工程总体室高级工程师，长期从事我国战略导弹，运载火箭的总体设计工作，退休以后，依然用共产党员的标准严格要求自己，发挥余热，奉献社会。坚持从事航天科普教育工作，本人为“钱学森青少年航天科学院”专家，参与培养航天后备人才工作。受聘参加“航天科普大讲堂讲师团”，为讲师团首批成员，向广大青少年宣传我国航天成就，普及航天知识。受邀在北京、天津、广州等地的许多中学、大学、科技馆和腾讯公司作过多场报告。其所写载人航天科普文章在杂志发表，广受好评。</p>
                        </div>
                    </div>
                </div>
            </div>
            <footer></footer>
        </div>
    </div>
    <script>
        window.onload = function () {
            getRem(750, 100)
            window.onresize = function () {
            };
            getRem(750, 100)
        };
        function getRem(pwidth, prem) {
            var html = document.getElementsByTagName("html")[0];
            var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
            html.style.fontSize = oWidth / pwidth * prem + "px";
        }

        /**
         * 修改文字 bug
         */
        var mainCont = document.querySelector(".main-inner")
        setTimeout(function () {
            mainCont.style.height = "auto"
        }, 200)

        /**
         * 判断顶部文字
         */
        var Title = document.querySelector(".name")
        var nameTitle = document.querySelector(".name i")
        console.log(nameTitle.innerText.length)
        if(nameTitle.innerText.length<7){
            Title.style.lineHeight = "inherit"
        }
        if (nameTitle.innerText.length > 7) {
            nameTitle.style.fontSize = "0.5rem"
        }
        if (nameTitle.innerText.length > 20) {
            nameTitle.style.fontSize = "0.4rem"
        }
    </script>
</body>
</html>